<template>
<!--account.wxml-->
<view class="container">
    <view class="cover">
        <view class="justify-content flex">        
            <view class="detail">
                    <view class="text-size">{{ userInfo.user_money }}</view>
                    <view class="price-text">可用余额</view>
            </view>
                <view class="detail">
                    <view class="text-size">{{ userInfo.user_money }}</view>
                    <view class="price-text">可提现</view>
            </view>
            <view class="detail">
                <view class="text-size">{{ userInfo.cash_in }}</view>
                <view class="price-text">提现中</view>
            </view>
        </view>
        <view style="border-bottom:2rpx solid #ff5c5c;" class="justify-content flex">
            <view class="detail">
                <view class="text-size">{{ userInfo.user_total_money  }}</view>
                <view class="price-text">累计充值</view>  
            </view>          
           <view class="detail">
                <view class="text-size">{{ userInfo.withdrawal_total_money }}</view>
                <view class="price-text">累计提现</view>
                
            </view>
            <view class="detail">
                <view class="text-size">{{ userInfo.frozen_money }}</view>
                <view class="price-text">冻结余额</view>
            </view>           
        </view>
        
        <view class="operate center">
            <navigator :url="'/pages/user/withdrawals/withdrawals?money=' + userInfo.user_money"><view class="op-item">
            <image src="/static/images/withdrawal.png"></image>
            申请提现
            <text></text>
            </view></navigator>
            <navigator :url="'/pages/user/recharge/recharge?money=' + userInfo.user_money"><view class="op-item">
            <image src="/static/images/recharge.png"></image>
            账户充值
            </view></navigator>
        </view>
    </view>
    <!-- <view class="list">
        <navigator url="/pages/user/account_list/account_list">
            <view class="item">余额明细
                <image class="wh100 arrow" src="../../../images/icon-arrowdown.png"></image>
            </view>
        </navigator>
        <navigator url="/pages/user/recharge_list/recharge_list">
            <view class="item">充值记录
                <image class="wh100 arrow" src="../../../images/icon-arrowdown.png"></image>
            </view>
        </navigator>
        <navigator url="/pages/user/withdrawals_list/withdrawals_list">
            <view class="item">提现记录
                <image class="wh100 arrow" src="../../../images/icon-arrowdown.png"></image>
            </view>
        </navigator>
    </view> -->
    <view class="switch">
        <view v-for="(item, index) in switchs" :key="index" class="switch-box">
            <view :id="item.number" :class="show == item.number ? 'switch-item-on' : ''" @tap="switchFun">
                {{item.name}}
            </view>
        </view>
    </view>
    <!-- 余额明细 -->
    <view :hidden="show==1?false:true" class="navbar">
        <view v-for="(item, index) in categories" :key="index" class="navbar-box">
            <view :id="item.type" :class="activeType == item.type ? 'navbar-item-on' : ''" @tap="changeTab">
                {{item.name}}
            </view>
        </view>
    </view>
     <view v-for="(item, index) in accounts" :key="index" :hidden="show==1?false:true" class="account-box">
        <view class="left">
            <view>单号：{{item.order_sn}}</view>
            <view class="bottom">{{item.changeTimeFommat}}</view>
        </view>
        <view class="right">
            <view v-if="item.user_money>0">+￥{{item.user_money}}</view>
            <view v-else>-￥{{-item.user_money}}</view>
            <view class="bottom">描述：{{item.desc}}</view>
        </view>
    </view>
    <!-- 余额明细end -->
    <!-- 充值记录 -->
        <view :hidden="show==2?false:true" class="recharge-box">
            <view class="recharge-item pay title">支付方式</view>
            <view class="recharge-item time title">日期</view>
            <view class="recharge-item price title">金额</view>
            <view class="recharge-item status title">状态</view>
        </view>
        <view v-for="(item, index) in recharges" :key="index" :hidden="show==2?false:true" class="recharge-box">
            <view class="recharge-item pay">{{item.pay_name ? item.pay_name : ''}}</view>
            <view class="recharge-item time">{{item.cTimeFommat}}</view>
            <view class="recharge-item price">{{item.account}}</view>
            <view class="recharge-item status">{{item.pay_status==0?'待支付':''}}{{item.pay_status==1?'已支付':''}}{{item.pay_status==2?'支付失败':''}}</view>
        </view>
    <!-- 充值记录end -->
    <!-- 提现记录 -->
        <view :hidden="show==3?false:true" class="withdrawal-box">
            <view class="withdrawal-item pay title">编号</view>
            <view class="withdrawal-item time title">申请日期</view>
            <view class="withdrawal-item price title">金额</view>
            <view class="withdrawal-item status title">状态</view>
        </view>
        <view v-for="(item, index) in withdrawals" :key="index" :hidden="show==3?false:true" class="withdrawal-box">
            <view class="withdrawal-item pay">{{item.id}}</view>
            <view class="withdrawal-item time">{{item.createTimeFommat}}</view>
            <view class="withdrawal-item price">{{item.money}}</view>
            <view class="withdrawal-item status">
            {{item.status==0?'申请中':''}}{{item.status==1?'申请成功':''}}{{item.status==2?'提现完成':''}}
            {{item.status==3?'转款失败':''}}{{item.status== -2?'审核作废':''}}{{item.status==-1?'审核失败':''}}
            </view>
        </view>
    <!-- 提现记录end -->
</view>
</template>

<script>
// account.js
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      userInfo: [],
      page: 2,
      categories: [//切换
      {
        name: "全部",
        type: 'all'
      }, {
        name: "赚取",
        type: 'plus'
      }, {
        name: "消费",
        type: 'minus'
      }],
      switchs: [//切换
      {
        name: "余额明细",
        number: '1'
      }, {
        name: "充值记录",
        number: '2'
      }, {
        name: "提现记录",
        number: '3'
      }],
      activeType: 'all',
      //余额选中全部时
      accounts: null,
      currentPage: 1,
      show: 1,
      //余额明细、充值记录、提现记录切换
      recharges: null,
      //请求的充值记录
      withdrawals: null,
      //请求的充值记录
      type: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    if (options && options.type) {
      this.setData({
        type: options.type
      });
    } // 余额明细


    var type = typeof options.type == 'undefined' ? this.activeType : options.type;
    load.init(this, '', 'accounts');
    this.requestAccountList(type); // // 充值记录
  },
  onShow: function () {
    var that = this;
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      });
    }, true, false);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      // 余额明细
      this.requestAccountList(this.activeType); // 充值记录

      this.requestChangeList(); //提现记录

      this.requestWithdrawalsList();
    }
  },
  onPullDownRefresh: function (e) {
    this.currentPage = 1;
    load.resetConfig(); // 余额明细

    this.accounts = null;
    this.requestAccountList(this.activeType); // 充值记录

    this.recharges = null;
    this.requestChangeList(); //提现记录

    this.withdrawals = null;
    this.requestWithdrawalsList();
  },
  methods: {
    //余额明细全部，赚取，消费切换
    changeTab: function (e) {
      //重置为未加载完成，数据的重置需要手动重置
      load.resetConfig();
      this.accounts = null;
      this.currentPage = 1;
      this.requestAccountList(e.currentTarget.id);
    },
    //余额明细，充值记录，提现记录切换
    switchFun: function (e) {
      this.setData({
        show: e.currentTarget.id
      });

      if (this.show == 1) {
        this.accounts = null;
        this.currentPage = 1;
        load.init(this, '', 'accounts');
      }

      if (this.show == 2) {
        this.recharges = null;
        this.currentPage = 1;
        load.init(this, '', 'recharges');
        this.requestChangeList();
      }

      if (this.show == 3) {
        this.withdrawals = null;
        this.currentPage = 1;
        load.init(this, '', 'withdrawals');
        this.requestWithdrawalsList();
      }
    },
    //请求余额信息
    requestAccountList: function (type) {
      var that = this;
      var requestUrl = '/api/user/account_list/type/' + type + '?p=' + that.currentPage;
      this.setData({
        activeType: type
      });
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.changeTimeFommat = util.format(val.change_time, 'yyyy-MM-dd  hh:mm');
        });
        uni.stopPullDownRefresh();
      });
    },
    // 请求充值记录
    requestChangeList: function () {
      var that = this;
      var requestUrl = '/api/user/recharge_list/' + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.cTimeFommat = util.format(val.ctime, 'yyyy-MM-dd');
        });
        uni.stopPullDownRefresh();
      });
    },
    // 提现记录
    requestWithdrawalsList: function () {
      var that = this;
      var requestUrl = '/api/user/withdrawals_list/type/' + that.type + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.createTimeFommat = util.format(val.create_time, 'yyyy-MM-dd');
        });
        uni.stopPullDownRefresh();
      });
    }
  }
};
</script>
<style>
/* account.wxss */
page{
    background: #fff;
}
.cover {
    background-color: #ff6a00; 
    color: white;
    height: 320rpx;
    position: relative;
}
.center{
 text-align: center;
}
.justify-content{
    justify-content: space-around;
    border-bottom: 2rpx solid #ff6a00;
}
.flex{
    display: flex;
}
.text-size{
    font-size:30rpx;
    margin-top:24rpx;
}
.detail {
    font-size: 36rpx;
    line-height: 40rpx;
    width:33.3%;
    text-align:center;
    border-right:2rpx solid #ff6a00;
    height:120rpx;
}
.price-text {
    font-size: 22rpx;
}
.operate {
    position: absolute;
    width: 100%;
}
.op-item {
    width: 50%;
    float: left;
    font-size: 24rpx;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20rpx;
}
.op-item text{
    width:2rpx;
    height:20rpx;
    background:#fff;
    position:absolute;
    left:375rpx;
    top:30rpx;
}
.op-item image{
    width:28rpx;
    height:28rpx;
    margin-right:14rpx;
}
.list {
    margin-top: 20rpx;
}
.item {
    font-size: 32rpx;
    background-color: white;
    padding: 25rpx 35rpx;
    border-bottom: 1rpx 
}
.arrow {
    margin-top: 5rpx;
    width: 25rpx;
    height: 28rpx;
    float: right;
}
.switch-box{
    font-size:30rpx;
    display:inline-block;
    width:250rpx;
    box-sizing:border-box;
    text-align:center;
    line-height:84rpx;
}
.switch-box view{
    color: #333333;
    background-color: #ebebeb;
}
.switch-item-on{
    color: #1a1a1a;
    background-color: #ffffff !important;
}
.navbar-box{
    font-size:30rpx;
    display:inline-block;
    width:33.333333%;
    box-sizing:border-box;
    text-align:center;
    line-height:76rpx;
    background:#fff;
    position:relative;
}
.navbar-box view{
    color:#666;
}
.navbar-item-on{
    font-size: 35rpx;
    color: #ff6a00!important;
}
.navbar-item-on::after{
    content:'';
    position: absolute;
    width:40rpx;
    height:8rpx;
    background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,115,61,1) 100%);
    border-radius:4rpx;
    left: 50%;
    margin-left: -20rpx;
    bottom: 0rpx;
}
.account-box{
    border-bottom:2rpx solid #f3f3f3;
    width:690rpx;
    margin-left:30rpx;
    display:flex;
    justify-content:space-between;
    height:108rpx;
    padding-top:20rpx;
    line-height:50rpx;
}
.account-box view{
    font-size: 30rpx;
     color: #333;
}
.account-box .bottom{
    font-size: 24rpx;
    color: #999;
    max-width:250rpx;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.account-box .right view:nth-child(1){
   color: #ff3b34;
   text-align:right;
}
/* 充值记录 */
.recharge-box{
    font-size: 28rpx;
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.recharge-item{
    display: inline-block; 
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
    box-sizing: border-box;
    text-align: center;
}
.recharge-box .pay{
    width: 35%;
}
.recharge-box .time{
    width: 23%;
}
.recharge-box .price{
    width: 20%;
}
.recharge-box .status{
    width: 22%;
    color: #e01222;
}
.recharge-box .title{
    color: #666666;
    font-size: 30rpx;
}
/* 提现记录 */
.withdrawal-box{
    font-size: 28rpx;
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.withdrawal-item{
    display: inline-block; 
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
    box-sizing: border-box;
    text-align: center;
}
.withdrawal-box .pay{
    width: 20%;
}
.withdrawal-box .time{
    width: 27%;
}
.withdrawal-box .price{
    width: 28%;
}
.withdrawal-box .status{
    width: 25%;
    color: #e01222;
}
.withdrawal-box .title{
    color: #666666;
    font-size: 32rpx;
}

</style>